<template>
  <div class="output-box bg">
    <!--   标题区域   -->
    <div class="header">产量统计</div>
    <div class="work-container">
      <YieldCharts ref="yield" />
    </div>
  </div>
</template>

<script>
import api from "@/api/apiServer";
import moment from "moment/moment";
import YieldCharts from "./components/YieldCharts";
export default {
  name: "index",
  components: { YieldCharts },
  computed: {
    startTime() {
      return moment()
        .subtract(7, "days")
        .format("YYYY-MM-DD");
    },
    endTime() {
      return moment()
        .subtract(1, "days")
        .format("YYYY-MM-DD");
    },
  },
  mounted() {
    this.getDayProduceSum();
  },
  methods: {
    async getDayProduceSum() {
      const { data: res } = await api.DayProduceSum({
        startTime: this.startTime,
        endTime: this.endTime,
      });
      this.$refs.yield.model = this.setData(res);
    },
    // 处理数据
    setData(result) {
      const dataX = this.getDataKey(result, "day");
      const dataY = this.getDataKey(result, "num");
      return { dataX, dataY };
    },
    // 数据重组
    getDataKey(data, key) {
      return data.map((item) => item[key]);
    },
  },
};
</script>

<style scoped lang="less">
@import "../../index";
</style>
